<template>
  <div class="onmiddle">
    <div v-for="(item, index) in datas" :key="index">
      <div><span class="red">{{datas[index].money}}</span>元</div>
      <div>{{datas[index].info}}</div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'InfoItem',
  
  data() {
    return {
      datas: [
        {id:1, money:"0.00", info:'我的余额'},
        {id:2, money:"0", info:'我的优惠'},
        {id:3, money:"0.00", info:'我的积分'}
      ]
    }
  }
}
</script>

<style scoped>
.onmiddle {
  display: flex;
  width: 100%;
  height: 16vh;
  background-color: rgb(233, 227, 227);
  /* position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0; */
  /* margin: auto; */
  /* padding: 10%; */
}
.onmiddle div{
  flex-wrap: nowrap;
  flex: 1;
  /* justify-content: center; */
  text-align: center;
  /* line-height: 16vh; */
  padding: 10px
}

  .red {
    color: red;
    font-size: 1.6rem;
  }
</style>
